<template>
  <div class="goods-add">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item to="/">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item to="/goods">商品列表</el-breadcrumb-item>
      <el-breadcrumb-item>添加商品</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="mt_20px">
      <el-alert title="添加商品信息" type="info" show-icon center></el-alert>

      <el-steps
        :active="active"
        finish-status="success"
        :process-status="active === 5 ? 'success' : ''"
        align-center
        class="mt_20px"
      >
        <el-step title="基本信息"></el-step>
        <el-step title="商品参数"></el-step>
        <el-step title="商品属性"></el-step>
        <el-step title="商品图片"></el-step>
        <el-step title="商品内容"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>

      <div v-show="active === 0">
        <el-form
          ref="jbxxForm"
          :model="form.jbxx.data"
          :rules="form.jbxx.rules"
        >
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="form.jbxx.data.goods_name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格" prop="goods_price">
            <el-input-number
              v-model="form.jbxx.data.goods_price"
              style="width: 100%;"
              :controls="false"
              :precision="2"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="商品重量" prop="goods_weight">
            <el-input-number
              v-model="form.jbxx.data.goods_weight"
              style="width: 100%;"
              :controls="false"
              :precision="2"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="商品数量" prop="goods_number">
            <el-input-number
              v-model="form.jbxx.data.goods_number"
              style="width: 100%;"
              :controls="false"
              :precision="0"
            ></el-input-number>
          </el-form-item>
          <el-form-item label="商品分类" prop="goods_cat">
            <goods-cate-cascader
              style="width: 100%;"
              v-model="form.jbxx.data.goods_cat"
              :allow-checked-levels="[3]"
            ></goods-cate-cascader>
          </el-form-item>
        </el-form>
      </div>
      <div v-show="active === 1">
        商品参数内容区域
      </div>
      <div v-show="active === 2">
        商品属性内容区域
      </div>
      <div v-show="active === 3">
        商品图片内容区域
      </div>
      <div v-show="active === 4">
        商品内容内容区域
      </div>
      <div v-show="active === 5">
        完成内容区域
      </div>

      <div class="btn_box">
        <el-button @click="prevStep">上一步</el-button>
        <el-button @click="nextStep">下一步</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import GoodsCateCascader from '@/components/GoodsCateCascader.vue';
export default {
  name: 'GoodsAdd',
  components: { GoodsCateCascader },
  data() {
    return {
      form: {
        jbxx: {
          data: {
            goods_name: '',
            goods_price: 0,
            goods_weight: 0,
            goods_number: 0,
            goods_cat: [],
          },
          rules: {
            goods_name: [
              {
                required: true,
                message: '请输入商品名称',
                trigger: ['change', 'blur'],
              },
            ],
            goods_price: [
              {
                required: true,
                message: '请输入商品价格',
                trigger: ['change', 'blur'],
              },
              {
                type: 'number',
                min: 0.01,
                max: 99999999.99,
                message: '商品价格区间必须是0.01 ~ 99,999,999.99之间',
                trigger: ['change', 'blur'],
              },
            ],
            goods_weight: [
              {
                required: true,
                message: '请输入商品重量',
                trigger: ['change', 'blur'],
              },
              {
                type: 'number',
                min: 0.01,
                max: 99999999.99,
                message: '商品重量区间必须是0.01 ~ 99,999,999.99之间',
                trigger: ['change', 'blur'],
              },
            ],
            goods_number: [
              {
                required: true,
                message: '请输入商品数量',
                trigger: ['change', 'blur'],
              },
              {
                type: 'integer',
                min: 1,
                max: 99999999,
                message: '商品数量区间必须是1 ~ 99,999,999之间',
                trigger: ['change', 'blur'],
              },
            ],
            goods_cat: [
              {
                required: true,
                message: '请选择商品分类',
                trigger: ['change', 'blur'],
              },
            ],
          },
        },
      },
      active: 0,
    };
  },
  methods: {
    prevStep() {
      if (this.active > 0) {
        this.active--;
      }
    },
    async nextStep() {
      if (this.active === 0) {
        try {
          await this.$refs.jbxxForm.validate();
        } catch (err) {
          return;
        }
      }

      if (this.active < 5) {
        this.active++;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.goods-add {
  .el-card {
    // 样式穿透，/deep/ 后面的选择器，不会受scoped的影响
    /deep/ .el-input__inner {
      text-align: left;
    }
    .btn_box {
      display: flex;
      justify-content: space-between;
    }
  }
}
</style>
